<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet"  href="https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css"/>
  <link rel="stylesheet" href="./css/index.css">
</head>
<body>
  <div id="main" v-cloak>
    <!-- 头部导航栏 -->
    <div class="page-nav-bar flex-box flex-align-center">
      <div class="nav-bar-left flex-box flex-align-center">
        <div class="flex-box flex-align-center">
          <van-icon name="arrow-left" />
        </div>
        <div>编辑</div>
      </div>
      <div class="nav-bar-title flex-1 flex-box flex-justify-center">预览</div>
      <div class="nav-bar-right flex-box flex-align-center flex-justify-center">下一步</div>
    </div>
    <!-- 页面主体 -->
    <div class="page-content" :style="{backgroundImage: 'url(' + selectedBg + ')'}" :class="getTypeface">
      <div class="cust-info flex-box flex-column" :class="selectedAvatarLayout == 0 ? '' : 'flex-align-center'">
        <div class="cust-avatar flex-box flex-align-center flex-justify-center">
          <van-icon name="user-o" size="40" />
        </div>
        <div class="cust-name">张三</div>
        <div class="content-info">
          <span class="article-time" v-if="selectedCreatedTime == 0">刚刚</span>
          <span>阅读：0</span>
        </div>
      </div>
      <div class="content-article">
        <template v-if="selectedArtilceLayout == 1">
          <div class="img-list flex-box flex-align-center flex-justify-center flex-column" >
            <img :style="{borderRadius: selectedImgRadius ? '6px' : 'none'}" :width="selectedImgLayout ? '100%' : '80%'" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fa0.att.hudong.com%2F52%2F62%2F31300542679117141195629117826.jpg&refer=http%3A%2F%2Fa0.att.hudong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1617087063&t=638e8f3a69212042089a34313c9119d6" alt="">
            <img :style="{borderRadius: selectedImgRadius ? '6px' : 'none'}" :width="selectedImgLayout ? '100%' : '80%'" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fa0.att.hudong.com%2F52%2F62%2F31300542679117141195629117826.jpg&refer=http%3A%2F%2Fa0.att.hudong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1617087063&t=638e8f3a69212042089a34313c9119d6" alt="">
            <img :style="{borderRadius: selectedImgRadius ? '6px' : 'none'}" :width="selectedImgLayout ? '100%' : '80%'" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fa0.att.hudong.com%2F52%2F62%2F31300542679117141195629117826.jpg&refer=http%3A%2F%2Fa0.att.hudong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1617087063&t=638e8f3a69212042089a34313c9119d6" alt="">
            <img :style="{borderRadius: selectedImgRadius ? '6px' : 'none'}" :width="selectedImgLayout ? '100%' : '80%'" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fa0.att.hudong.com%2F52%2F62%2F31300542679117141195629117826.jpg&refer=http%3A%2F%2Fa0.att.hudong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1617087063&t=638e8f3a69212042089a34313c9119d6" alt="">
            <img :style="{borderRadius: selectedImgRadius ? '6px' : 'none'}" :width="selectedImgLayout ? '100%' : '80%'" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fa0.att.hudong.com%2F52%2F62%2F31300542679117141195629117826.jpg&refer=http%3A%2F%2Fa0.att.hudong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1617087063&t=638e8f3a69212042089a34313c9119d6" alt="">
          </div>
          <div class="artilce-text">我是一片文章</div>
        </template>
        <template v-else>
          <div class="artilce-text">我是一片文章</div>
          <div class="img-list flex-box flex-align-center flex-justify-center flex-column" >
            <img :style="{borderRadius: selectedImgRadius ? '6px' : 'none'}" :width="selectedImgLayout ? '100%' : '80%'" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fa0.att.hudong.com%2F52%2F62%2F31300542679117141195629117826.jpg&refer=http%3A%2F%2Fa0.att.hudong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1617087063&t=638e8f3a69212042089a34313c9119d6" alt="">
            <img :style="{borderRadius: selectedImgRadius ? '6px' : 'none'}" :width="selectedImgLayout ? '100%' : '80%'" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fa0.att.hudong.com%2F52%2F62%2F31300542679117141195629117826.jpg&refer=http%3A%2F%2Fa0.att.hudong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1617087063&t=638e8f3a69212042089a34313c9119d6" alt="">
            <img :style="{borderRadius: selectedImgRadius ? '6px' : 'none'}" :width="selectedImgLayout ? '100%' : '80%'" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fa0.att.hudong.com%2F52%2F62%2F31300542679117141195629117826.jpg&refer=http%3A%2F%2Fa0.att.hudong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1617087063&t=638e8f3a69212042089a34313c9119d6" alt="">
            <img :style="{borderRadius: selectedImgRadius ? '6px' : 'none'}" :width="selectedImgLayout ? '100%' : '80%'" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fa0.att.hudong.com%2F52%2F62%2F31300542679117141195629117826.jpg&refer=http%3A%2F%2Fa0.att.hudong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1617087063&t=638e8f3a69212042089a34313c9119d6" alt="">
            <img :style="{borderRadius: selectedImgRadius ? '6px' : 'none'}" :width="selectedImgLayout ? '100%' : '80%'" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fa0.att.hudong.com%2F52%2F62%2F31300542679117141195629117826.jpg&refer=http%3A%2F%2Fa0.att.hudong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1617087063&t=638e8f3a69212042089a34313c9119d6" alt="">
          </div>
        </template>
      </div>
      <div ref="musicBox" :style="{animationPlayState: musicBoxRotate ? 'running' : 'paused'}" class="music-box flex-box flex-align-center flex-justify-center">
        <div class="music-box-circle flex-box flex-align-center flex-justify-center">
          <van-icon name="audio" size="20" color="#fff"/>
        </div>
      </div>
      <audio ref="musicAudio" :src="selectedMusicPlayed" loop="loop" autoplay="autoplay"></audio>
    </div>
    <!-- 底部 -->
    <div class="page-footer flex-box">
      <div class="item-tabs flex-box">
        <div @click="toggleItem('model')" class="foot-item flex-1 flex-box flex-align-center flex-justify-center" :class="selectedItem == 'model' ? 'item-selected' : ''">模板</div>
        <div @click="toggleItem('music')" class="foot-item flex-1 flex-box flex-align-center flex-justify-center" :class="selectedItem == 'music' ? 'item-selected' : ''">音乐</div>
        <div @click="toggleItem('typeface')" class="foot-item flex-1 flex-box flex-align-center flex-justify-center" :class="selectedItem == 'typeface' ? 'item-selected' : ''">字体</div>
        <div @click="toggleItem('layout')" class="foot-item flex-1 flex-box flex-align-center flex-justify-center" :class="selectedItem == 'layout' ? 'item-selected' : ''">排版</div>
      </div>
      <div 
          class="item-content" 
          ref="actionContent"
          :style="{height: itemContentHeight, transform: showAction ? 'translateY(0)' : 'translateY(' + itemContentHeight + ')', boxShadow: showAction ? '0 -6px 10px rgba(0, 0, 0, 0.1)' : 'none' }">
        <div v-show="selectedItem == 'model'" style="height: 100%;">
          <van-tabs v-model="modelActive" animated>
            <van-tab v-for="item in modelTabList" :title="item.modelTab" :key="item.id">
              <ul class="model-content-list flex-box">
                <template v-if="item.modelBgList && item.modelBgList.length == 0">
                  <div class="create-none-txt flex-box flex-align-center flex-justify-center">
                    收藏和创建的模板会在这里
                  </div>
                </template>
                <template v-else>
                  <li class="model-content-item" @click="handleSelectTheme(i)" v-for="i in item.modelBgList" :key="i.bgId">
                    <div class="model-item-wrapper">
                      <div class="model-item-pic" :style="{backgroundImage: 'url(' + i.bgUrl + ')'}"></div>
                      <div class="model-item-txt flex-box flex-align-center flex-justify-center">{{ i.bgName }}</div>
                      <div class="item-sign flex-box flex-align-center flex-justify-center">
                        <van-icon name="star" color="#fff" />
                      </div>
                      <div v-show="selectedTheme == i.bgId" class="model-item-wrapper-mask flex-box flex-align-center flex-justify-center">
                        <van-icon name="success" color="#fff" size="40" />
                      </div>
                    </div>
                  <li>
                </template>
              </ul>
            </van-tab>
            
          </van-tabs>
          <div class="mask-box flex-box flex-align-center flex-justify-center" :style="{background: modelActive != 0 ? '#3C9DFE' : '#FDF9EE'}">
            <div v-if="modelActive != 0" class="flex-box flex-align-center flex-justify-center flex-column">
              <div>
                <van-icon name="apps-o" size="25" />
              </div>
              <div>模板库</div>
            </div>
            <div v-else class="flex-box flex-align-center flex-justify-center flex-column">
              <div>
                <van-icon name="plus" size="25" color="#C9992A" />
              </div>
              <div style="color: #C9992A;">创建模板</div>
              <div class="vip-icon-container">
                <van-icon class="vip-icon" name="fire" size="16" color="#FFF1D6" />
              </div>
            </div>
          </div>
        </div>
        <div v-show="selectedItem == 'music'">
          <van-tabs v-model="musicActive" animated>
            <van-tab v-for="item in musicCategoryList" :title="item.categoryName" :name="item.categoryId" :key="item.categoryId" >
              <div style="height: 100%;">
                    <ul class="music-content-list flex-box">
                      <template v-if="item.songList && item.songList.length == 0">
                        <div style="width: 100%;" class="flex-box flex-align-center flex-justify-center">暂无歌曲收藏</div>
                      </template>
                      <template v-else>
                        <li class="music-content-item" @click="handleSelecteMusic(i)" v-for="i in item.songList">
                          <div style="width: 100%; height: 100%;">
                            <div class="music-item-pic flex-box flex-align-center flex-justify-center">
                              <div class="music-item-circle flex-box flex-align-center flex-justify-center" :style="{backgroundImage: 'url(' + i.imgUrl + ')'}"></div>
                              <div v-show="selectedMusic == i.id" class="music-item-wrapper-mask flex-box flex-align-center flex-justify-center">
                                <van-icon name="success" color="#fff" size="40" />
                              </div>
                            </div>
                            <div class="music-item-txt">{{ i.title }}</div>
                          </div>
                        </li>
                      </template>
                    </ul>
              </div>
            </van-tab>
          </van-tabs>
          <div class="mask-box" style="color: #000;">
            <div class="music-head flex-box flex-align-center flex-justify-center">
              <div class="music-head-circle flex-box flex-align-center flex-justify-center">
                <van-icon name="search" size="40" color="#fff" />
              </div>
            </div>
            <div class="music-txt flex-box flex-align-center flex-justify-center">更多音乐</div>
          </div>
        </div>
        <div v-show="selectedItem == 'typeface'" class="typeface-content-wrapper">
          <div class="typeface-title">最近使用的字体</div>
          <div class="typeface-item flex-box flex-align-center" :class="selectedType == 0 ? 'typeface-active' : ''" @click="handleSelecteType(0)">默认字体</div>
          <div class="typeface-title">所有字体</div>
          <div class="typeface-item flex-box flex-align-center" :class="selectedType == 0 ? 'typeface-active' : ''" @click="handleSelecteType(0)">默认字体</div>
          <div class="typeface-item flex-box flex-align-center" :class="selectedType == 1 ? 'typeface-active' : ''" @click="handleSelecteType(1)" style="font-family: 'FZGuFang';">古仿体</div>
          <div class="typeface-item flex-box flex-align-center" :class="selectedType == 2 ? 'typeface-active' : ''" @click="handleSelecteType(2)" style="font-family: 'KaiTi';">楷体</div>
          <div class="typeface-item flex-box flex-align-center" :class="selectedType == 3 ? 'typeface-active' : ''" @click="handleSelecteType(3)" style="font-family: 'FZLBJT';">隶变简体</div>
          <div class="typeface-item flex-box flex-align-center" :class="selectedType == 4 ? 'typeface-active' : ''" @click="handleSelecteType(4)" style="font-family: 'FZYST';">悠宋体</div>
          <div class="typeface-item flex-box flex-align-center" :class="selectedType == 5 ? 'typeface-active' : ''" @click="handleSelecteType(5)" style="font-family: 'FZWBJT';">魏碑简体</div>
          <div class="typeface-item flex-box flex-align-center" :class="selectedType == 6 ? 'typeface-active' : ''" @click="handleSelecteType(6)" style="font-family: 'FZTJLS';">铁筋隶书</div>
          <div class="typeface-item flex-box flex-align-center" :class="selectedType == 7 ? 'typeface-active' : ''" @click="handleSelecteType(7)" style="font-family: 'FZHCT';">黄草体</div>
          <div class="typeface-item flex-box flex-align-center" :class="selectedType == 8 ? 'typeface-active' : ''" @click="handleSelecteType(8)" style="font-family: 'FZKLT';">快乐体</div>
          <div class="typeface-item flex-box flex-align-center" :class="selectedType == 9 ? 'typeface-active' : ''" @click="handleSelecteType(9)" style="font-family: 'YRXK';">悠然小楷</div>
          <div class="typeface-item flex-box flex-align-center" :class="selectedType == 10 ? 'typeface-active' : ''" @click="handleSelecteType(10)" style="font-family: 'ZST';">竹石体</div>
          <div class="typeface-item flex-box flex-align-center" :class="selectedType == 11 ? 'typeface-active' : ''" @click="handleSelecteType(11)" style="font-family: 'CST';">粗书体</div>
        </div>
        <div v-show="selectedItem == 'layout'" class="layout-content-wrapper">
          <div>
            <div class="layout-title">文字排布</div>
            <div class="layout-txt-list flex-box flex-align-center" style="margin-bottom: 10px;">
              <div class="layout-item" @click="handleToggleArtilcelLayout(0)">
                <div class="layout-item-wrapper flex-box flex-column" :class="selectedArtilceLayout == 0 ? 'layout-item-active' : ''">
                  <div class="layout-item-pic"></div>
                  <div class="layout-item-txt flex-box flex-align-center flex-justify-center">字下图上</div>
                </div>
              </div>
              <div class="layout-item" @click="handleToggleArtilcelLayout(1)" :class="selectedArtilceLayout == 1 ? 'layout-item-active' : ''">
                <div class="layout-item-wrapper flex-box flex-column">
                  <div class="layout-item-pic"></div>
                  <div class="layout-item-txt flex-box flex-align-center flex-justify-center">字上图下</div>
                </div>
              </div>
            </div>

            <div class="layout-title">头像和昵称</div>
            <div class="layout-avatar-list flex-box flex-align-center" style="margin-bottom: 10px;">
              <div class="layout-item">
                <div class="layout-item-wrapper flex-box flex-column"  @click="handleToggleAvatarLayout(0)" :class="selectedAvatarLayout == 0 ? 'layout-item-active' : ''">
                  <div class="layout-item-pic"></div>
                  <div class="layout-item-txt flex-box flex-align-center flex-justify-center">左对齐</div>
                </div>
              </div>
              <div class="layout-item">
                <div class="layout-item-wrapper flex-box flex-column" :class="selectedAvatarLayout == 1 ? 'layout-item-active' : ''"  @click="handleToggleAvatarLayout(1)">
                  <div class="layout-item-pic"></div>
                  <div class="layout-item-txt flex-box flex-align-center flex-justify-center">居中</div>
                </div>
              </div>
              <div class="layout-item" >
                <div class="layout-item-wrapper flex-box flex-column" @click="handleToggleAvatarLayout(2)" :class="selectedAvatarLayout == 2 ? 'layout-item-active' : ''">
                  <div class="layout-item-pic"></div>
                  <div class="layout-item-txt flex-box flex-align-center flex-justify-center">无</div>
                </div>
              </div>
            </div>

            <div class="layout-title">图片排布</div>
            <div class="layout-avatar-list flex-box flex-align-center" style="margin-bottom: 10px;">
              <div class="layout-item">
                <div class="layout-item-wrapper flex-box flex-column" :class="selectedImgMode == 0 ? 'layout-item-active' : ''" @click="handleToggleImgLayout(false, false, 0)">
                  <div class="layout-item-pic"></div>
                  <div class="layout-item-txt flex-box flex-align-center flex-justify-center">默认</div>
                </div>
              </div>
              <div class="layout-item">
                <div class="layout-item-wrapper flex-box flex-column" :class="selectedImgMode == 1 ? 'layout-item-active' : ''" @click="handleToggleImgLayout(false, false, 1)">
                  <div class="layout-item-pic"></div>
                  <div class="layout-item-txt flex-box flex-align-center flex-justify-center">直角</div>
                </div>
              </div>
              <div class="layout-item">
                <div class="layout-item-wrapper flex-box flex-column" :class="selectedImgMode == 2 ? 'layout-item-active' : ''" @click="handleToggleImgLayout(true, false, 2)">
                  <div class="layout-item-pic"></div>
                  <div class="layout-item-txt flex-box flex-align-center flex-justify-center">通栏</div>
                </div>
              </div>
              <div class="layout-item">
                <div class="layout-item-wrapper flex-box flex-column" :class="selectedImgMode == 3 ? 'layout-item-active' : ''" @click="handleToggleImgLayout(false, true, 3)">
                  <div class="layout-item-pic"></div>
                  <div class="layout-item-txt flex-box flex-align-center flex-justify-center">圆角</div>
                </div>
              </div>
            </div>

            <div class="layout-title">发布时间</div>
            <div class="layout-avatar-list flex-box flex-align-center" style="margin-bottom: 10px;">
              <div class="layout-item">
                <div class="layout-item-wrapper flex-box flex-column" :class="selectedCreatedTime == 0 ? 'layout-item-active' : ''" @click="handleToggleCreateTime(0)">
                  <div class="layout-item-pic"></div>
                  <div class="layout-item-txt flex-box flex-align-center flex-justify-center">显示</div>
                </div>
              </div>
              <div class="layout-item">
                <div class="layout-item-wrapper flex-box flex-column" :class="selectedCreatedTime == 1 ? 'layout-item-active' : ''" @click="handleToggleCreateTime(1)">
                  <div class="layout-item-pic"></div>
                  <div class="layout-item-txt flex-box flex-align-center flex-justify-center">不显示</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="flod-btn flex-box flex-align-center flex-justify-center" @click="toggleFlod">
          <span>{{ !!showAction ? '收起' : '展开' }}</span>
          <van-icon :name="!!showAction ? 'arrow-down' : 'arrow-up'" />
        </div>
      </div>
    </div>
  </div>
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  <script src="js/vue.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js"></script>
  <script src="js/mock.js"></script>
  
  <script>
    var vm = null
    console.log(musicCategoryList)
    vm = new Vue({
      el: '#main',
      data: function () {
        return {
          selectedItem: 'model',
          showAction: true,
          modelActive: 0,
          musicActive: 1,
          itemContentHeight: '150px',
          selectedTheme: undefined,
          selectedBg: '',
          selectedMusic: undefined,
          selectedType: 0,
          musicCategoryList: musicCategoryList,
          selectedMusicPlayed: '',
          modelTabList: modelList,
          selectedArtilceLayout: 0,
          selectedAvatarLayout: 1,
          selectedImgLayout: false,
          selectedImgRadius: false,
          selectedImgMode: 0,
          selectedCreatedTime: 0,
          musicBoxRotate: false,
          mapTypeface: [
            'default-typeface',
            'FZGuFang-typeface',
            'KaiTi-typeface',
            'FZLBJT-typeface',
            'FZYST-typeface',
            'FZWBJT-typeface',
            'FZTJLS-typeface',
            'FZHCT-typeface',
            'FZKLT-typeface',
            'YRXK-typeface',
            'ZST-typeface',
            'CST-typeface',
          ]
        }
      },
      methods: {
        toggleItem: function (i) {
          vm.selectedItem = i
          switch(vm.selectedItem) {
            case 'typeface':
              vm.itemContentHeight = '250px'
              break
            case 'layout':
              vm.itemContentHeight = '200px'
              break
            default:
              vm.itemContentHeight = '150px'
              break
          }
          if (vm.selectedItem == 'music') {
            vm.musicActive = 1
          }
          if (!vm.showAction) {
            vm.showAction = true
          }
        },
        toggleFlod: function() {
          vm.showAction = !vm.showAction
        },
        handleSelectTheme: function (i) {
          vm.selectedTheme = i.bgId
          vm.selectedBg = i.bgUrl
        },
        handleSelecteMusic: function (i) {
          vm.selectedMusic = i.id
          if (i.id == -1) {
            vm.musicBoxRotate = false
            this.$refs.musicAudio.src = ''
          vm.selectedMusicPlayed = ''
            return 
          }
          vm.musicBoxRotate = true
          vm.selectedMusicPlayed = i.play
        },
        handleSelecteType: function (i) {
          vm.selectedType = i
        },
        handleChangeMusicCategory: function (name, title) {
          vm.getSongLists(name)
        },
        handleToggleArtilcelLayout: function (i) {
          console.log(i)
          vm.selectedArtilceLayout = i
        },
        handleToggleAvatarLayout: function (i) {
          vm.selectedAvatarLayout = i
        },
        handleToggleImgLayout: function (width, radius, mode) {
          if (width) {
            vm.selectedImgLayout = true
          } else {
            vm.selectedImgLayout = false
            
          }

          if (radius) {
            vm.selectedImgRadius = true
          } else {
            vm.selectedImgRadius = false
          }

          vm.selectedImgMode = mode
        },
        handleToggleCreateTime: function (i) {
          vm.selectedCreatedTime = i
        }
      },
      watch: {

      },
      computed: {
        getTypeface: function () {
          return this.mapTypeface[this.selectedType]
        }
      },
      created: function () {

      }
    })
  </script>
</body>
</html>